<template>
    <div class="right">
        <!-- 面包屑 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>
                <a href="javascript:;">权限管理</a>
            </el-breadcrumb-item>
            <el-breadcrumb-item>权限列表</el-breadcrumb-item>
        </el-breadcrumb>
        <template>
            <el-table :data="tableRights" border style="width: 100%">
                <el-table-column type="index" width="50">
                </el-table-column>
                <el-table-column prop="authName" label="权限" width="180">
                </el-table-column>
                <el-table-column prop="path" label="路径" width="180">
                </el-table-column>
                <el-table-column prop="level" label="层级">
                    <!-- template+scope得到每行层级的值，然后进行判断 -->
                    <template slot-scope="scope">
                        <!-- 过滤器 -->
                        <!-- 表格中使用过滤器需要在插值表达式种使用 -->
                        <span>{{scope.row.level|levelFormat}}</span>
                        </template>
                </el-table-column>
            </el-table>
        </template>
    </div>
</template>

<script>
import {getAllRights} from '@/api/index.js'
export default {
  data () {
    return {
      tableRights: []

    }
  },
  // 过滤器
  filters: {
    levelFormat (level) {
      if (level === '0') {
        return '一级'
      } else if (level === '1') {
        return '二级'
      } else {
        return '三级'
      }
    }
  },
  mounted () {
    getAllRights('list').then((res) => {
      this.tableRights = res.data
    })
  }
}

</script>

<style lang="scss" scoped>
.el-breadcrumb {
  background-color: #f5f5f5;
  height: 45px;
  font-size: 15px;
  padding-left: 10px;
  line-height: 45px;
  margin-bottom: 15px;
}
</style>
